<template>
	<view>
		<navbar title="名人名事" :autoBack="true">
			<view class="rightbtn" slot='rightbtn' @click="navto('/pages/home/load')">
				我要载入
			</view>
		</navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con" v-if="loading">
				<image :src="URL(info.image)" class="con__box" mode="aspectFill"></image>
				<!-- <view class="con__box">
					
				</view> -->
				<view class="con__text">
					{{info.intro}}
				</view>
				<view class="con__title">
					评论列表
					<view class="u-flex u-flex-y-center">
						<view class="" @click="dianz">
							<image src="/static/home/dz.png" v-if="info.isOk==0" class="con__title__dz" mode=""></image>
							<image src="/static/home/ydz.png" v-else class="con__title__dz" mode=""></image>
						</view>
						<view class="con__title__num">
							{{info.ok}}
						</view>
					</view>
				</view>
				<view class="con__pllist">
					<view class="con__pllist__item" v-for="(item,index) in pllist" :key="index">
						<image :src="URL(item.avatar)" class="con__pllist__item__tx" mode=""></image>
						<view class="" style="flex: 1;">
							<view class="u-flex u-flex-y-center u-flex-between">
								<view class="con__pllist__item__name">
									{{item.username}}
								</view>
								<view class="con__pllist__item__time">
									{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss')}}
								</view>
							</view>
							<view class="con__pllist__item__content">
								{{item.content}}
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<image src="/static/home/dz1.png" class="footer__dz" mode=""></image>
			<input type="text" placeholder="请输入..." v-model="content" class="footer__inp" />
			<u-button color="#3E5170" shape='circle' @click="pl"
				:customStyle='{width:"152rpx",height:"80rpx",marginLeft:"16rpx",marginRight:"30rpx",padding:0,fontSize:"30rpx",color:"#FFFFFF"}'>发送</u-button>
		</view>
		<view class="jp">
			家谱
		</view>
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				info: {},
				loading: false,
				id: '',
				pllist: [],
				content:''
			};
		},
		onLoad(o) {
			this.id=o.id
			this.getinfo()
		},
		methods: {
			getinfo() {
				home.getGlobalInfo({
					id: this.id
				}).then(res => {
					if (res.data.code == 1) {
						this.loading = true
						this.info = res.data.data
						this.pllist = res.data.data.comment
					}
				})
			},
			dianz() {
				home.ok({
					globalmemory_id: this.info.id
				}).then(res => {
					if (res.data.code == 1) {
						if (this.info.isOk == 0) {
							this.info.isOk = 1
							this.info.ok++
						} else {
							this.info.isOk = 0
							this.info.ok--
						}
					}
				})
			},
			pl() {
				if(!this.content){
					return
				}
				home.comment({
					globalmemory_id: this.info.id,
					content: this.content
				}).then(res => {
					if (res.data.code == 1) {
						this.content=''
						this.getinfo()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.rightbtn {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #1E1E1E;
		line-height: 30rpx;
	}

	page {
		background-color: #F0F3F7;
	}

	.scbox {
		height: calc(100vh - var(--status-bar-height) - 44px - 122rpx);

		.con {

			padding: 20rpx 30rpx;

			&__box {
				height: 675rpx;
				width: 690rpx;
				background: #efefef;
				border-radius: 26rpx;
				border: 1rpx solid #7B98C1;
				margin: 0 auto;
			}

			&__text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #3E5170;
				line-height: 48rpx;
				margin-top: 25rpx;
				margin-bottom: 28rpx;
			}

			&__title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #1E1E1E;
				line-height: 26rpx;

				&__dz {
					width: 33rpx;
					height: 32rpx;
					margin-right: 11rpx;
				}

				&__num {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #3E5170;
					line-height: 30rpx;
				}
			}
			&__pllist{
				padding: 20rpx 10rpx;
				&__item{
					display: flex;
					margin-bottom: 20rpx;
					&__tx{
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						background-color: #3E5170;
						margin-right: 10rpx;
					}
					&__name{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #1E1E1E;
						line-height: 30rpx;
					}
					&__time{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #3E5170;
						line-height: 24rpx;
					}
					&__content{
						margin-top: 10rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #3E5170;
						line-height: 36rpx;
					}
				}
			}
		}
	}

	.footer {
		width: 750rpx;
		height: 123rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;

		&__dz {
			width: 80rpx;
			height: 80rpx;
			margin: 0 14rpx 0 30rpx;
		}

		&__inp {
			flex: 1;
			height: 80rpx;
			background: #F0F3F7;
			border-radius: 40rpx;
			padding: 0 34rpx;
		}
	}

	.jp {
		width: 106rpx;
		height: 106rpx;
		background: #3E5170;
		border-radius: 50%;
		border: 10rpx solid #b5becb;
		position: fixed;
		bottom: 160rpx;
		right: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>